<template>
  <div class="bottom-bar">
    <div class="bottom-check">
      <check-button :is-checked="isSelectAll" class="check-button" @click="AllChecked"/>
      <span>全选</span>
    </div>
    <div class="bottom-price"> 合计: {{ totalPrice }}</div>
    <div class="bottom-calc" @click="isSumUp">
      去计算({{ checkLength }})
    </div>
  </div>
</template>

<script>
import CheckButton from "@/components/content/checkButton/CheckButton";

export default {
  name: "CartBottomBar",
  components: {
    CheckButton
  },
  computed: {
    totalPrice() {
      return "￥" + this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((pre, item) => {
        item.price = item.price ? item.price : 0
        return pre + item.price * item.count
      }, 0).toFixed(2)
    },
    checkLength() {
      return this.$store.state.cartList.filter(item => item.checked).length
    },
    isSelectAll() {
      /*
       找到没有选中的
          如果找到了，说明有商品没有选中，返回true，经过取反为false
          如果没找到，说明全部选中了，返回undefined，经过取反为true
        */
      if (this.$store.state.cartList.length === 0) return false
      return !this.$store.state.cartList.find(item => !item.checked)
    }
  },
  methods: {
    AllChecked() {
      let checked = !this.isSelectAll
      this.$store.state.cartList.forEach(p => {
        p.checked = checked
      })
    },
    isSumUp(){
      const obj = {}
      obj.isSelect = this.isSelectAll
      obj.totalPrice = this.totalPrice
      this.$emit('isSumUp',obj)
    }
  }
}
</script>

<style scoped>
.bottom-bar {
  height: 50px;
  background-color: #eee;
  position: relative;
  line-height: 40px;
  display: flex;
  font-size: 14px;
}

.bottom-check {
  width: 90px;
  display: flex;
  height: 20px;
  margin-left: 7px;
}

.check-button {
  width: 20px;
  height: 20px;
  line-height: 20px;
  margin-right: 6px;
  margin-top: 10px;
}

.bottom-price {
  margin-left: 25px;
  flex: 1;
}

.bottom-calc {
  width: 90px;
  background: red;
  color: #fff;
  text-align: center;
}

</style>
